<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
    <title>客户-二手车</title>
    <script type="text/javascript" src="js/flexible2.0.js"></script>
    <link rel="stylesheet" type="text/css" href="css/common.css">
    <link rel="stylesheet" type="text/css" href="css/style.css">
</head>

<body>
    <div class="coms-container page-contract-form">
        <form action="TianJiaHeTong-result.html">
            <div class="caption">客户信息</div>
            <div class="item-list">
                <div class="item-cell clearfix">
                    <label class="lab">姓&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;名</label>
                    <div class="para-val"><input type="text" class="ipt-text" placeholder="请输入客户姓名"></div>
                </div>
                <div class="item-cell clearfix">
                    <label class="lab">身份证号</label>
                    <div class="para-val"><input type="text" class="ipt-text" placeholder="请输入客户的身份证号"></div>
                </div>
                <div class="item-cell clearfix">
                    <label class="lab">手机号码</label>
                    <div class="para-val"><input type="text" class="ipt-text" placeholder="请输入客户的手机号码"></div>
                </div>
            </div>
            <div class="caption">车商信息</div>
            <div class="item-list">
                <div class="item-cell clearfix">
                    <label class="lab">选择车商</label>
                    <div class="para-val">
                        <a class="cheshang-entry" href="CheShang-search.html"><span class="tit none">请选择对应的二手车商</span><i class="iconfont icon-youfanyexiao"></i></a>
                    </div>
                </div>
            </div>
            <div class="caption">车辆信息</div>
            <div class="item-list">
                <div class="item-cell clearfix">
                    <label class="lab">类&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;型</label>
                    <div class="para-val"><input type="text" disabled class="ipt-text" placeholder="二手车" value="二手车" disabled></div>
                </div>
                <div class="item-cell clearfix">
                    <label class="lab">品&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;牌</label>
                    <div class="para-val"><input type="text" class="ipt-text" placeholder="请输入车辆品牌，如宝马"></div>
                </div>
                <div class="item-cell clearfix">
                    <label class="lab">车&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;型</label>
                    <div class="para-val"><input type="text" class="ipt-text" placeholder="请输入车型信息，如X5"></div>
                </div>
                <div class="item-cell clearfix">
                    <label class="lab">颜&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;色</label>
                    <div class="para-val"><input type="text" class="ipt-text" placeholder="请输入车辆颜色，如白色"></div>
                </div>
                <div class="item-cell clearfix">
                    <label class="lab">车&nbsp; 架 &nbsp;号</label>
                    <div class="para-val"><input type="text" class="ipt-text" placeholder="请输入车架号"></div>
                </div>
                <div class="item-cell clearfix">
                    <label class="lab">发动机号</label>
                    <div class="para-val"><input type="text" class="ipt-text" placeholder="请输入发动机号"></div>
                </div>
                <div class="item-cell clearfix">
                    <label class="lab">购车定金</label>
                    <div class="para-val"><input type="text" class="ipt-text" placeholder="请输入购车定金"><span class="munit">元</span></div>
                </div>
            </div>
            <div class="caption">购车费用</div>
            <div class="item-list">
                <div class="item-cell clearfix">
                    <label class="lab">车辆费用</label>
                    <div class="para-val"><input type="text" class="ipt-text" placeholder="请输入车辆费用"><span class="munit">元</span></div>
                </div>
                <div class="item-cell clearfix">
                    <label class="lab">上&nbsp; 牌 &nbsp;费</label>
                    <div class="para-val"><input type="text" class="ipt-text" placeholder="请输入上牌费"><span class="munit">元</span></div>
                </div>
                <div class="item-cell clearfix">
                    <label class="lab">保&nbsp; 险 &nbsp;费</label>
                    <div class="para-val"><input type="text" class="ipt-text" placeholder="请输入保险费"><span class="munit">元</span></div>
                </div>
                <div class="item-cell clearfix">
                    <label class="lab">购&nbsp; 置 &nbsp;税</label>
                    <div class="para-val"><input type="text" class="ipt-text" placeholder="请输入购置税"><span class="munit">元</span></div>
                </div>
                <div class="item-cell clearfix">
                    <label class="lab">其他费用</label>
                    <div class="para-val"><input type="text" class="ipt-text" placeholder="请输入其他费用"><span class="munit">元</span></div>
                </div>
                <div class="item-cell item-pgbg clearfix">
                    <label class="lab">评估报告</label>
                    <div class="coms-plupload-container esc-pgbg">
                        <ul class="coms-upload-list clearfix">
                        </ul>
                        <a id="J_pickfiles1" class="btn-pickfiles upload-default" href="javascript:;"><i class="iconfont icon-tianjia"></i></a>
                    </div>
                </div>
                <div class="item-cell item-pgbg clearfix">
                    <label class="lab">评估报告</label>
                    <div class="esc-pgbg-uploadlist auditing">
                        <div class="uploadlist-cell">
                            <div class="pic"><img class="p-img" src="uploads/01.png" data-src="uploads/01.png"></div>
                                <p class="tip-txt">审核中</p>
                            </div>
                        </div>
                    </div>
                    <div class="item-cell  item-pgbg clearfix">
                        <label class="lab">评估报告</label>
                        <div class="esc-pgbg-uploadlist fail">
                            <div class="uploadlist-cell">
                                <div class="pic"><img class="p-img" src="uploads/01.png" data-src="uploads/01.png"></div>
                                    <p class="tip-txt">审核失败</p>
                                </div>
                            </div>
                            <div class="coms-plupload-container esc-pgbg esc-pgbg-fail">
                                <ul class="coms-upload-list clearfix">
                                </ul>
                                <a id="J_pickfiles1" class="btn-pickfiles upload-default" href="javascript:;"><i class="iconfont icon-tianjia"></i></a>
                            </div>
                        </div>
                    <div class="item-cell item-pgbg clearfix">
                        <label class="lab">评估报告</label>
                        <div class="esc-pgbg-uploadlist success">
                            <div class="uploadlist-cell">
                                <div class="pic"><img class="p-img" src="uploads/01.png" data-src="uploads/01.png"></div>
                                    <p class="tip-txt">审核失败</p>
                                </div>
                            </div>
                        </div>
                        <div class="item-cell clearfix">
                            <label class="lab">合计费用</label>
                            <div class="total-money">123457元</div>
                        </div>
                    </div>
                    <div class="money-loan">
                        <input type="number" class="ipt-loan-money" placeholder="请输入实际贷款金额">
                        <span class="unit">元</span>
                    </div>
                    <div class="tip-m-1">该客户最高可贷124589元 <a href="#">选择最高金额</a></div>
                    <div class="ipt-submit"><input type="submit" class="coms-btn primary" value="生成合同"></div>
        </form>
    </div>


     <!-- photoswiper start*********************************************** -->
    <div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">
        <!-- Background of PhotoSwipe. 
         It's a separate element as animating opacity is faster than rgba(). -->
        <div class="pswp__bg"></div>
        <!-- Slides wrapper with overflow:hidden. -->
        <div class="pswp__scroll-wrap">
            <!-- Container that holds slides. 
            PhotoSwipe keeps only 3 of them in the DOM to save memory.
            Don't modify these 3 pswp__item elements, data is added later on. -->
            <div class="pswp__container">
                <div class="pswp__item"></div>
                <div class="pswp__item"></div>
                <div class="pswp__item"></div>
            </div>
            <!-- Default (PhotoSwipeUI_Default) interface on top of sliding area. Can be changed. -->
            <div class="pswp__ui pswp__ui--hidden">
                <div class="pswp__top-bar">
                    <!--  Controls are self-explanatory. Order can be changed. -->
                    <div class="pswp__counter"></div>
                    <button class="pswp__button pswp__button--close" title="Close (Esc)"></button>
                    <button class="pswp__button pswp__button--share" style="display:none;" title="Share"></button>
                    <button class="pswp__button pswp__button--fs" style="display:none;" title="Toggle fullscreen"></button>
                    <button class="pswp__button pswp__button--zoom" style="display:none;" title="Zoom in/out"></button>
                    <!-- Preloader demo http://codepen.io/dimsemenov/pen/yyBWoR -->
                    <!-- element will get class pswp__preloader--active when preloader is running -->
                    <div class="pswp__preloader">
                        <div class="pswp__preloader__icn">
                            <div class="pswp__preloader__cut">
                                <div class="pswp__preloader__donut"></div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap" style="display:none;">
                    <div class="pswp__share-tooltip"></div>
                </div>
                <button class="pswp__button pswp__button--arrow--left" style="display:none;" title="Previous (arrow left)">
                </button>
                <button class="pswp__button pswp__button--arrow--right" style="display:none;" title="Next (arrow right)">
                </button>
                <div class="pswp__caption" style="display:none;">
                    <div class="pswp__caption__center"></div>
                </div>
            </div>
        </div>
    </div>
    <!-- photoswiper end*********************************************** -->



    <script type="text/javascript" src="js/zepto.js"></script>
    <script type="text/javascript" src="js/plupload/moxie.js"></script>
    <script type="text/javascript" src="js/plupload/plupload.dev.js"></script>
    <script type="text/javascript" src="js/plupload/i18n/zh_CN.js"></script>
    <script type="text/javascript" src="js/uploadfile.js"></script>
    <link rel="stylesheet" type="text/css" href="js/photoSwiper/photoswipe.css">
    <link rel="stylesheet" type="text/css" href="js/photoSwiper/default-skin/default-skin.css">
    <script type="text/javascript" src="js/photoSwiper/photoswipe.min.js"></script>
    <script type="text/javascript" src="js/photoSwiper/photoswipe-ui-default.min.js"></script>
    <script type="text/javascript" src="js/mDialog.js"></script>
    <script type="text/javascript">
    var imgReady = (function() {
    var list = [],
        intervalId = null,

        // 用来执行队列
        tick = function() {
            var i = 0;
            for (; i < list.length; i++) {
                list[i].end ? list.splice(i--, 1) : list[i]();
            };
            !list.length && stop();
        },

        // 停止所有定时器队列
        stop = function() {
            clearInterval(intervalId);
            intervalId = null;
        };

    return function(url, ready, load, error) {

        var onready, width, height, newWidth, newHeight,
            img = new Image();

        img.src = url;

        // 如果图片被缓存，则直接返回缓存数据
        if (img.complete) {

            ready.call(img);
            load && load.call(img);
            return;
        };

        width = img.width;
        height = img.height;

        // 加载错误后的事件
        img.onerror = function() {
            error && error.call(img);
            onready.end = true;
            img = img.onload = img.onerror = null;
        };

        // 图片尺寸就绪
        onready = function() {
            newWidth = img.width;
            newHeight = img.height;
            if (newWidth !== width || newHeight !== height ||
                // 如果图片已经在其他地方加载可使用面积检测
                newWidth * newHeight > 1024
            ) {
                ready.call(img);
                onready.end = true;
            };
        };
        onready();

        // 完全加载完毕的事件
        img.onload = function() {
            // onload在定时器时间差范围内可能比onready快
            // 这里进行检查并保证onready优先执行
            !onready.end && onready();

            load && load.call(img);

            // IE gif动画会循环执行onload，置空onload即可
            img = img.onload = img.onerror = null;
        };

        // 加入队列中定期执行
        if (!onready.end) {
            list.push(onready);
            // 无论何时只允许出现一个定时器，减少浏览器性能损耗
            if (intervalId === null) intervalId = setInterval(tick, 40);
        };
    };
})();

(function($){
     var openPhotoSwipe = function(items) {
        var pswpElement = document.querySelectorAll('.pswp')[0],
            options = {
                index: 0,
                history: false,
                focus: false,
                showAnimationDuration: 0,
                hideAnimationDuration: 0
            };

        var gallery = new PhotoSwipe(pswpElement, PhotoSwipeUI_Default, items, options);
        gallery.init();
    };
    $(function(){
        $picElem=$(".esc-pgbg-uploadlist .p-img");
        $.each($picElem,function(index, el) {
            var $el=$(el);
            var src=$el.attr("data-src");
            if(!!src){
                imgReady(src, function (img) {
                    $el.attr({"data-w":this.width,"data-h":this.height})
                });
            }
        });
        $(".esc-pgbg-uploadlist .p-img").on("click",function(){
            var $this = $(this);
            var item = [{}];
            item[0]["src"] = $this.attr("data-src");
            item[0]["w"] = $this.attr("data-w");
            item[0]["h"] = $this.attr("data-h");
            openPhotoSwipe(item);
        })
        $(document).on("click", ".coms-upload-list .preview-pic", function() {
              var $this = $(this);
            var item = [{}];
            item[0]["src"] = $this.attr("data-src");
            item[0]["w"] = $this.attr("data-w");
            item[0]["h"] = $this.attr("data-h");
            openPhotoSwipe(item);
        })
    })
})(Zepto);
    $(function() {
        var uploader1 = $(".btn-pickfiles").plupload({
            url: './php/upload.php',
            //动态添加<input type="hidden"> 表单提交的数据的时候用到
            inputHidden: false,
            filters: {
                max_file_count: 1,
                max_file_size: '5mb',
            },
            //传递参数 uid 等等
            multipart_params: {
                uid: 10
            },
            //初始化调用函数
            initLoad: function(up) {

            },
            //每个文件上传后触发函数(上传成功或者失败都可以触发)
            fileUploaded: function(up, file, responseInfo) {

                var response = $.parseJSON(responseInfo.response);
                var $parent = up.$container.parent();
                if($parent.find('.esc-pgbg-uploadlist').length){
                       $parent.find('.esc-pgbg-uploadlist').hide();
                }

                if (!!response.OK && response.OK == 1) {
                    file.$success.show();
                    file.$progress.hide().children().css("width", 0);
                    //设置input的值
                    !!file.$inputHidden.length && file.$inputHidden.val("");
                } else {
                    //服务器上传失败
                    file.status = plupload.FAILED;
                    file.$error.show();
                    file.$progress.hide().children().css("width", 0);
                }

            },
            fileRemoved: function(up, file) {
                var $parent = up.$container.parent();
                if($parent.find('.esc-pgbg-uploadlist').length){
                       $parent.find('.esc-pgbg-uploadlist').show();
                }
            },
            //plupload 执行全部的上传事件后触发该函数，只触发一次
            uploadComplete: function(up, files) {

            }

        });
    })
    </script>
</body>

</html>